<template>
	<view class="repair-wrap">
		<view class="u-m-t-20 repair-box u-p-40 u-p-l-30 " style="margin-top: 20rpx !important;">

			<view class="flexClsNowrapSpcBtw"
				style="display: flex;justify-content: space-between; margin-bottom: 10px;align-items: center;width:100%">

				<!-- 	v-if="classList.post_name != null && classList.dept_name != null && classList.employee_name" -->
				<view>{{classList.work_complete_time}}</view>
				<view>
					<view class="notice-typeOrgin" v-if="classList.work_type == 1">
						工作安排
					</view>
					<view class="notice-typeBlue" v-if="classList.work_type == 2">
						循环计划
					</view>
					<view class="notice-typePuTong" v-if="classList.work_type == 3">
						工作记录
					</view>
					<view class="notice-typeOrgin" v-if="classList.work_type == 4">
						公区报事报修
					</view>
				</view>
			</view>

			<view class="fengexina"></view>

			<view style="margin-top: 20rpx;">
				<view class="top-name-info">{{classList.work_name}}</view>
			</view>
			<!-- <view style="margin-top: 10px;display: flex;color: #999;" class="flexClsNowrapSpcBtw">
				<view style="color: #333;margin-right: 10px;">工作名称：</view>
				<view>{{classList.work_position_text}}</view>
			</view> -->

			<view style="margin-top: 10px;color: #999;">
				<view style="margin-right: 10px;">工作内容：</view>
				<view style="text-indent: 2em;color: #333;margin-top: 10rpx;">{{classList.work_content}}</view>
			</view>

			<!-- <view style="margin-top: 10px;display: flex;color: #999;" class="flexClsNowrapSpcBtw">
				<view style="color: #333;margin-right: 10px;">完成时间：</view>
				<view>{{classList.work_complete_time}}</view>
			</view> -->
			<view class="fengexina" style="margin-top: 20px"></view>
			<view v-if="classList.workType != '工作记录'" style="margin-top: 40rpx;">
				<view style="margin-top: 10px;color: #999;">
					<view style="margin-right: 10px;">完成说明：</view>
					<view style="text-indent: 2em;color: #333;margin-top: 10rpx;">{{classList.work_complete_content}}
					</view>
				</view>

			</view>
			<view class="flexClsNowrapSpcBtw"
				style="margin-top: 20px ;width:680rpx; display: flex;align-items: center; justify-content: space-between;background-color:#f2f2f2;padding:10px 3px;box-sizing: border-box;"
				v-if="classList.work_complete_images != null">
				<!-- <view style="margin-right: 10px;">内容图片：</view> -->
				<img v-for="(item,index) in classList.work_complete_images"
					style="width: 105px;height: 105px;border-radius: 5px;object-fit: cover;"
					@click="preview(item,index,classList.work_complete_images)" :src="item" mode="">
				</img>

				<!-- <img style="width: 100px;height: 100px;border-radius: 5px;object-fit: cover;"
					@click="preview(classList.work_complete_images)" :src="classList.work_complete_images" mode="">
				</img>
				<img style="width: 100px;height: 100px;border-radius: 5px;object-fit: cover;"
					@click="preview(classList.work_complete_images)" :src="classList.work_complete_images" mode="">
				</img> -->
			</view>
			<view>
				<view style="margin-top: 20px;color: #999;display:flex">
					<view style="margin-right: 10px;">经办人：</view>
					<!-- 	v-if="classList.post_name != null && classList.dept_name != null && classList.employee_name" -->
					<view style="color: #333;">
						{{classList.dept_name}}-{{classList.post_name}}-{{classList.employee_name}}
					</view>
				</view>

			</view>

		</view>
		<view class="bill-deta-btn">
			<button @click='prev' class="yilingqu">返回列表</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classList: {},
				id: null,
			}
		},
		onLoad(options) {
			this.id = options.id
			console.log(this.id)
			// this.getRepaireClass(options.id)
		},
		onShow() {
			this.getRepaireClass()
		},
		methods: {
			// 获取报修类型
			getRepaireClass(id) {
				this.$request.api.workPublicityDetail({
					id: this.id,
				}).then(res => {
					this.classList = res.data.data
					console.log(res.data.data.work_complete_images.split('@'))
					this.classList.work_complete_images = res.data.data.work_complete_images.split('@')
				});
			},
			//返回上一页
			prev() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 图片预览
			// preview(item) {
			// 	uni.previewImage({
			// 		urls: [item],
			// 		current: 0,
			// 		longPressActions: {
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});
			// },
			preview(item, index, imgarrs) {
				var imgarr = []
				for (let i = 0; i < imgarrs.length; i++) {
					imgarr.push(imgarrs[i])
				}

				uni.previewImage({
					urls: imgarr,
					current: index,
				});
			},
		}
	}
</script>

<style lang="scss">
	.top-name-info {
		font-size: 19px;
		font-weight: 700;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 22px;
	}

	.fengexina {
		border-top-width: 0.3px;
		border-top-style: solid;
		border-top-color: #dee2e6;
	}



	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.notice-type {
		// width: 80rpx;
		// height: 40rpx;
		background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx
	}

	.notice-typePuTong {
		// width: 80rpx;
		// height: 40rpx;
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx 10rpx
	}

	.notice-typeBlue {
		background: linear-gradient(90deg, #007aff 0%, #007affd1 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx 10rpx
	}

	.notice-typeOrgin {
		background: linear-gradient(90deg, #FFAA33 0%, #FFBB66 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx 10rpx
	}

	.bill-deta-btn {
		width: 100%;
		margin-top: 30rpx;

		.pay {
			background: #ff9900 !important;
			color: #fff;
		}

		.yilingqu {
			width: 80%;
			height: 84rpx;
			// background:#F9A832;
			// background-color: #F9A832;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
		}

		.guar-back-w i {
			width: 6px;
			height: 16px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			margin-top: -3px;
		}
	}
</style>